<template>
  <v-app>
    <v-container>
      <h3>justify-items examples</h3>
      <div class="d-flex flex-column ga-4">
        <div class="grid justify-items-start">
          <div class="item">start</div>
          <div class="item">start</div>
        </div>
        <div class="grid justify-items-end">
          <div class="item">end</div>
          <div class="item">end</div>
        </div>
        <div class="grid justify-items-center">
          <div class="item">center</div>
          <div class="item">center</div>
        </div>
        <div class="grid justify-items-stretch">
          <div class="item">stretch</div>
          <div class="item">stretch</div>
        </div>
      </div>
    </v-container>
  </v-app>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 8px;
  gap: 8px;
  border: 1px solid #ccc;
}

.item {
  background: #ddd;
  padding: 8px;
  text-align: center;
  min-width: 40px;
}
</style>